const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin') //每次编译的时候，就会清空dist文件夹
const VueLoaderPlugin  = require('vue-loader/lib/plugin')
const vuxLoader = require('vux-loader')
// const webpack = require('webpack') //启动热更新的第二步

//这个配置文件，起始就是一个js文件，通过node中的模块操作，向外暴露了一个配置对象
module.exports =  {
    mode: 'development',//可以更改模式
    entry: { //多入口,表示要使用webpack打包哪个文件
        index: './src/index.js', //生成index.html
        // a: './src/a.js' //生成a.html
        vendor: [
            'vue',
            'vue-router',
        ]
    },
    output:{ //出口，输出文件相关的配置
        path: path.resolve(__dirname, './dist'),//指定打包好的文件，输出到哪个目录中去
        // filename: 'bundle.js' //这里指定输出的文件的名称
        filename: '[name].[hash:8].js' //[name]意思是打包后文件名和入口文件一致
    },
    devServer: {//开发本地服务器
        // open: false,//是否自动打开浏览器
        // port: 8888, //设置启动时候的运行端口
        //compress: true, //启动服务器压缩文件,
        // contentBase: 'src', //指定托管的根目录
        // hot: true //启动热更新 的第一步
    },module: { //模块配置
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/, //不需要执行的文件夹
                use: {
                    loader: "babel-loader",
                }
            }, //{
            //     test: /\.css$/,
            //     use: ExtractTextPlugin.extract(
            //         {
            //             fallback: 'style-loader',//开发模式替用
            //             use: ['css-loader']
            //         })
            // },
            {
                test: /\.(scss|css)$/,
                use:  [  'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
            },{
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader',
                    'less-loader',
                ],
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: { minimize: true }
                    }]},
            {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: [
                {
                    loader: "url-loader",
                    options: {
                        limit:8192, //小于8k的图片自动转成base64格式
                        name:'[hash:8]-[name].[ext]',
                        outputPath: 'images/' //outputPath 图片打包后的文件夹
                    }
                }]},{
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                use: [{loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'media/[name].[hash:7].[ext]'
                }
            }]},
            {test: /.(ttf|eot|svg|woff|woff2)$/, use: "url-loader"},
            {test: /\.vue$/, use: "vue-loader"}
          ]
    },plugins: [//插件配置
        // new webpack.HotModuleReplacementPlugin(), //启动热更新的第三步,
        new CleanWebpackPlugin(),//该配置需要在new HtmlWebpackPlugin之前
        //new ExtractTextPlugin({filename: 'style.css', disable: false //上线时改为false开启 true为开发模式禁用, allChunks: true}),
        new MiniCssExtractPlugin({
            filename: 'style.[contenthash].css',
            chunkFilename: "[id].css"
        }),
        new HtmlWebpackPlugin({ //这个插件会将 js 代码通过 <script> 注入到 HTML 文件中
            // inject: false,
            hash: true,//清除缓存
            template: path.join(__dirname,'./src/index.html'),//指定模板页面
            chunks: ['index'], //index指向entry对象的key
            minify: {
                removeAttributeQuotes: true,//去除属性的双引号
                collapseWhitespace: true, //折叠代码为一行
            }, //上线时优化代码使用
            filename: 'index.html' //指定模板页面生成的页面的名称
        }),
        new WebpackMd5Hash(),
        new VueLoaderPlugin ()
    ],
    resolve: { //配置解析
        alias: { //修改 Vue 被导入时包的路径,配置项通过别名来把原导入路径映射成一个新的导入路径
            "vue$": 'vue/dist/vue.esm.js'
        },
        extensions: ['*','.js','.vue','.json']
    },
    //使用webpack-dev-server这个工具，来实现自动打包编译的功能
    //运行npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
}

